<script setup lang="ts">
import { Table } from '@/components/Table'
import { Search } from '@/components/Search'
import { useI18n } from '@/hooks/web/useI18n'
import { ContentDetailWrap } from '@/components/ContentDetailWrap'
import { h ,reactive, ref, watch} from 'vue'
import { getCourseTable, getCourseTree,getCourseUserInfo,changeCourseStatus,delCourse} from '@/api/course'
import { useTable } from '@/hooks/web/useTable'
import {ElIcon,ElTag,ElSwitch, ElRow, ElCol, ElCard, ElSkeleton, ElTreeV2, ElButton,ElImage, formatter, ElMessage} from 'element-plus'
import { useCrudSchemas } from '@/hooks/web/useCrudSchemas'
import { TableColumn } from 'element-plus/es/components/table/src/table-column/defaults'
import { Dialog } from '@/components/Dialog'
import { Descriptions } from '@/components/Descriptions'
import { spawn } from 'child_process'
import { type } from 'os'
import { useRouter } from 'vue-router'
import Write from './components/Write.vue'
const { push } = useRouter()
const { t } = useI18n()

let treedata=ref()
getCourseTree().then((res) => {
  treedata.value = res.data
  console.log(treedata)
})
//树结构
const props = {
  value: 'id',
  label: 'name',
  children: 'children'
}
const columns = reactive([
  {
    field: 'index',
    label: '序号',
    type: 'index',
    form: {
      colProps: {
        span: 24
      },
      show: false
    },
    detail: {
      show: false
    }
  },
  {
    field: 'url',
    label: '课程图片',
    formatter: (_: Recordable, __: TableColumn, cellValue: string) => {
      return h(
        ElImage,
        {
          src:cellValue
        },
      )
    },
    form:{
       colProps: {
        span: 24
      },
      component: 'Upload',
      componentProps:{
      slots: {
        default: true
      },
      action:'/siyun/SyOperationController/uoloadCourse',
      optionsSlot: true
    },
    }
  },
  {
    field: 'courseName',
    label: '课程名称',
    search:{
      show:true
    },
    form: {
      colProps: {
        span: 24
      }
    
    },
    detail:{
      
    }
  },
  {
    field: 'userName',
    label: '上传人',
    form: {
      colProps: {
        span: 24
      }
    },
  },
  {
    field: 'courseNprice',
    label: '价格',
    search:{
      show:true
    },
    form: {
      colProps: {
        span: 24
      }
    },
  },
  {
    field: 'courseStatus',
    label: '状态',
    form:{
       colProps: {
        span: 24
      },
      component:'Switch',
      componentProps:{
        activeValue:'2',
        inactiveValue:'3',
        inlinePrompt:true,
        activeText:'上架', 
        inactiveText:'下架'
      }
    }
  },
  {
    field: 'className',
    label: '分类',
    search:{
      show:true,
      component: 'TreeSelect',
      componentProps:{
          data:treedata,
          props:props
        }
    },
    form: {
      colProps: {
        span: 24
      },
    component: 'TreeSelect',
    componentProps:{
        data:treedata,
        props:props
      }
    },
  },
  {
    field: 'courseCstatus',
    label: '审核状态',
    formatter: (_: Recordable, __: TableColumn, cellValue: number) => {
        if(cellValue===3){
          return '未审核'
        }
        if(cellValue===4){
          return '审核中'
        }
        if(cellValue===5){
          return '审核失败' 
        }
        if(cellValue===6){
          return '审核成功'
        }
        
    },
    form: {
      colProps: {
        span: 24
      },
      component: 'Select',
      componentProps: {
        style: {
          width: '100%'
        },
        options: [
          {
            label: '未审核',
            value: 3
          },
          {
            label: '审核中',
            value: 4
          },
          {
            label: '审核失败',
            value: 5
          },
          {
            label: '审核成功',
            value: 6
          }
        ]
      }
    }
  },
  {
    field: 'action',
    width: '260px',
    label: t('tableDemo.action'),
    form: {
      colProps: {
        span: 24
      },
      show: false
    },
    detail: {
      show: false
    }
  }
])
const { allSchemas } = useCrudSchemas(columns)
const { register, tableObject, methods } = useTable({
  getListApi: getCourseTable,
})
const { getList,setSearchParams } = methods
getList()




const AddAction = () => {
  push('/techer/course/courseadd')
}
const dialogVisible = ref(false)
//课程详情数据
let courseInfo;
  const openEdit = (row,type)=>{
    dialogVisible.value=true
    courseInfo =row
    getCourseUserInfo({"tableName":"sy_user","tableInfo":"true_name","userId":row.userId}).then((res)=>{
      courseInfo.true_name = res.data.userNames
    })

  }
//点击树的事件
const treeNodeCilck=(data,node,e)=>{
  tableObject.params=Object.assign(tableObject.params,{
    classid:data.id
  });
  getList()
}
// 改变状态的事件
const change = (row)=>{
    let status=row.courseStatus==2?2:3
    
    changeCourseStatus({courseId:row.courseId,status:status}).then((res)=>{
      console.log(res)
    })
}

const EditDialog = ref(false)
const action =(row,type)=>{
    tableObject.currentRow=row
    EditDialog.value=true
}
//删除课程
const delCourses= async (row,type)=>{
  console.log(row)
  const res = await delCourse({
    cid:row.courseId,
    url:row.url,
    mid:row.userId
  })
  if(res.data!=0){
    ElMessage.success({
      message:'删除成功'
    })
    getList()
  }else{
    ElMessage.error({
      message:'删除失败请重试'
    })
  }
}

</script>

<template>
    <ElRow>
      <ElCol :xl="4" :lg="4" :md="18" :sm="18" :xs="18">
          <el-tree-v2 :data="treedata" :props="props" @node-click="treeNodeCilck" /> 
      </ElCol>
      <ElCol :xl="20" :lg="20" :md="24" :sm="24" :xs="24">
               <Search :schema="allSchemas.searchSchema" @search="setSearchParams" @reset="setSearchParams"/> 
          <div class="mb-10px">
            <ElButton type="primary" @click="AddAction">{{ t('exampleDemo.add') }}</ElButton>
          </div>
        <Table
          v-model:pageSize="tableObject.pageSize"
          v-model:currentPage="tableObject.currentPage"
          :loading="tableObject.loading"
          :columns="allSchemas.tableColumns"
          :data=" 
            tableObject.tableList.slice((tableObject.currentPage - 1) * tableObject.pageSize,tableObject.currentPage * tableObject.pageSize)"
          :pagination="{
            total: tableObject.total
          }"
          @register="register">
          <template #courseStatus="{ row }">
                <ElSwitch
                    v-model="row.courseStatus"
                    :active-value="2"
                    :inactive-value="3"
                    @change="change(row)"
                    active-text="上架"
                    inactive-text="下架"
                    style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"

                  />
          </template>
          <template #action="{ row }"> 
            <ElButton type="primary" link @click="openEdit(row, 'detail')">
              查看 
            </ElButton>
            <ElButton type="success" link @click="action(row, 'edit')">
              编辑
            </ElButton>
            <ElButton type="danger" link @click="delCourses(row, false)">
              删除
            </ElButton>
         </template>
        </Table>
        <Dialog v-model="dialogVisible" title="">
           <Descriptions
              title="课程详情"
              message="message"
              :data="courseInfo"
              :schema="allSchemas.detailSchema">
              <template #url="{ row }">
                <ElImage  :src="row.url" />
              </template>
              <template #courseStatus="{ row }">
                {{
                  row.courseStatus==2?'已上架':'未上架'
                }}
              </template>
              <template #courseCstatus="{ row }">
                {{
                  row.courseCstatus==3?'未审核'
                  :row.courseCstatus==4?'审核中'
                  :row.courseCstatus==5?'审核失败'
                  :row.courseCstatus==6?'审核成功':''
                }}
              </template>
             </Descriptions>
      
          <template #footer>
            <el-button @click="dialogVisible = false">关闭</el-button>
          </template>
        </Dialog>
         <Dialog v-model="EditDialog" title="编辑课程">
           <Write
            :current-row="tableObject.currentRow"
            :form-schema="allSchemas.formSchema"
           />
           <template #footer>
            <el-button @click="EditDialog = false" type="primary">确定</el-button>
          </template>
         </Dialog>
      </ElCol>
    </ElRow> 
</template>
<style scoped>

.demo-image__error .block {
  padding: 30px 0;
  text-align: center;
  border-right: solid 1px var(--el-border-color);
  display: inline-block;
  width: 49%;
  box-sizing: border-box;
  vertical-align: top;
}
.demo-image__error .demonstration {
  display: block;
  color: var(--el-text-color-secondary);
  font-size: 14px;
  margin-bottom: 20px;
}
.demo-image__error .el-image {
  padding: 0 5px;
  max-width: 300px;
  max-height: 200px;
  width: 100%;
  height: 200px;
}

.demo-image__error .image-slot {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  background: var(--el-fill-color-light);
  color: var(--el-text-color-secondary);
  font-size: 30px;
}
.demo-image__error .image-slot .el-icon {
  font-size: 30px;
}
</style>
